@outerbg:url ("@{imgUrl}/body_bg.jpg") center top no-repeat;
@import './function.less';
html,
body {
	height: 100%;
	color: @body-font-color;
	font-size: 14px;
	background: none;
	// background: fade(darken(@primaryColor,30%),30%);
	box-sizing: border-box;
	margin: 0;
	// overflow: auto;
	padding-top: 0.1px;
	overflow: auto;
	.scrollbar();
	// &.layui-layout-body{
	//     height: 100%;
	// }
}
html {
	overflow: hidden;
}
ul,
li {
	list-style: none;
}
.layui-fluid {
	padding: 0;
}
.outer {
	height: 100vh;
	box-sizing: border-box;
	background: @outerBg;
	background-size: cover;
	position: relative;
	& > .layui-layout {
		display: flex;
		flex-direction: column;
		height: 100%;

		& > .header-area {
			display: flex;
			flex-direction: column;
			background: url("@{imgUrl}/title_bg.png") center top no-repeat;
			& > .logo-area {
				height: 80px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				// border:1px solid #f00;
				// background: url("@{imgUrl}/title_bg_center.png") center top repeat-x;
				& > .name {
					font-size: 28px;
					font-weight: bold;
					margin: 10px 0 0 0;
					color: #fff;
				}
				// &::before{
				//     content: '';
				//     width: 100px;
				//     flex:auto;
				//     height: 100%;
				//     background: url("@{imgUrl}/title_bg_left.png") center top no-repeat;
				//     background-position:right 0;
				// }
				// &::after{
				//     content: '';
				//     width: 100px;
				//     flex:auto;
				//     height: 100%;
				//     background: url("@{imgUrl}/title_bg_right.png") center top no-repeat;
				//     background-position:left 0;
				// }
				&::before {
					content: "";
					width: 200px;
					height: 2px;
					background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
					position: absolute;
					bottom: 0px;
					left: calc(50% - 200px);
					border-radius: 50%;
					box-shadow1: 0 0px 2px rgba(255, 255, 255, 0.5), 0 0px 4px rgba(255, 255, 255, 0.5), 0 0px 6px rgba(255, 255, 255, 0.5), 0 0px 8px rgba(255, 255, 255, 0.5), 0 0px 10px rgba(255, 255, 255, 0.5);
					animation: animate1 5s ease-in-out infinite;
				}
				@keyframes animate {
					0% {
						width: 0;
					}
					50% {
						width: 400px;
					}
					100% {
						width: 0;
					}
				}
				@keyframes animate1 {
					0% {
						transform: translate(0px);
					}
					50% {
						transform: translate(200px);
					}
					100% {
						transform: translate(0px);
					}
				}
			}
			& > .head-menu-area-bk {
				& > .head-menu-area-main {
					display: flex;
					justify-content: center;
					padding: 0.5rem 0;
					& > .head-menu-area {
						// .menu1();
						ul {
							// border:1px solid #f00;
							display: flex;
							li {
								@jbg:rgba (255,255,255,.4);
								.box1(4px,rgba(255,255,255, 0.4));
								margin: 0 10px;
								border-radius: 0 4px 0 4px;
								// &::before {
								//     top: -1px;
								//     left: -1px;
								//     border-left: 1px solid @jbg;
								//     border-top: 1px solid @jbg;
								// }
								// &::after {
								//     bottom: 0;
								//     right: 0;
								//     border-right: 1px solid @jbg;
								//     border-bottom: 1px solid @jbg;
								// }
								a {
									color: #fff;
									padding: 6px 12px;
									display: block;
									background: rgba(255, 255, 255, 0.08);
								}
								&.hover,
								&:hover {
									border: 1px solid rgba(0, 153, 255, 0.5);
									background: rgba(0, 153, 255, 0.2);
									// border: 1px solid rgba(255,255,255,0.8);
									box-shadow: 0px 0px 10px rgba(0, 153, 255, 0.7);
								}
							}
						}
					}
				}
			}
			& > .layui-header {
				@header-smenu-height: 30px;
				// display: none;
				float: right;
				background: none;
				border: 0;
				margin: 10px 15px 0 0;
				width: 400px;
				right: 0;
				left: auto;
				height: @header-smenu-height;
				a {
					color: hsla(var(--bc) / var(--tw-text-opacity, 1)) !important;
					&:hover {
						color: hsla(var(--bc) / var(--tw-text-opacity, 1));
					}
					& > cite {
						color: hsla(var(--bc) / var(--tw-text-opacity, 1));
					}
				}
				.layui-nav {
					display: flex;
					&-item {
						height: @header-smenu-height !important;
						line-height: @header-smenu-height !important;
						&>a{
							display: flex;
							// padding:0 20px 0 10px;
							&>cite{
								// display: flex;
								white-space:nowrap;
							}
						}
					}
		
					&-child {
						top: @header-smenu-height !important;
						// display: block !important;
						min-width: 60px;
						dd {
							a {
								text-align: right;
		
								.layui-badge {
									position: relative;
								}
							}
						}
					}
				}
				.layui-nav-bar {
					background-color: hsl(var(--p));
				}
			}
		}
		& > .main {
			flex: auto;
			overflow: hidden;
			display: flex;
			position: relative;
			padding: 10px;
			& > .layui-side {
				// top:auto;
				position: relative;
				background: none;
				display: flex;
				flex-direction: column;
				height: auto;
				align-self: flex-start;
				// margin:10px;
				// max-height: calc(100% - 33px);
				// flex:auto;
				max-height: 100%;
				.card-bg();
				& > .side-menu-type {
					border-bottom: 1px solid rgba(255, 255, 255, 0.2);
					padding: 6px;
					display: flex;
					align-items: center;
					&::before {
						width: 2px;
						height: 12px;
						content: "";
						background: #fff;
						position: relative;
						margin: 0 4px 0 0;
					}
				}
				// & > .layui-side-scroll {
				// 	width: auto;
				// 	// max-height: 100%;
				// 	flex: auto;
				// 	overflow: auto;
				// 	padding: 0 10px 0 0;
				// 	.scrollbar();
				// 	& > .layui-side-menu {
				// 	}
				// 	& > .layui-nav {
				// 		margin: 0;
				// 		width: auto;
				// 		& > .layui-nav-item {
				// 			dd{
				// 				a{
				// 					padding:0 0 0 10px;
				// 				}
				// 			}
				// 			& > .layui-this {
				// 				background: rgba(255, 255, 255, 0.05);
				// 				& > a {
				// 					background: none;
				// 				}
				// 			}
				// 			& > .layui-nav-itemed {
				// 				& > .layui-nav-child {
				// 					background-color: rgba(0, 0, 0, 0.2) !important;
				// 					& > .layui-this {
				// 						background: rgba(255, 255, 255, 0.05);
				// 						& > a {
				// 							background: none;
				// 						}
				// 					}
				// 				}
				// 			}
				// 		}
				// 	}
				// }
			}
			@import './frame-side-menu.less';
			& > .hide {
				width: 0px;
				overflow: hidden;
				padding: 0;
				border: 0;
			}
			& > .zkBody {
				overflow: hidden;
				flex: auto;
				display: flex;
				flex-direction: column;
				padding: 0 10px;
				width: 100px;
				& .layadmin-pagetabs {
					position: relative;
					top: 0;
					left: 0;
					background: none;
					margin: 0 0 10px 0;
					.box1();
					.layui-tab {
						margin: 0 40px 0 40px;
					}
					.layui-tab-title {
						& > li {
							border: 0;
							color: rgba(255, 255, 255, 0.6);
							&:hover {
								background: rgba(255, 255, 255, 0.2);
							}
							&:after {
								background-color: @primaryColor;
								top: auto;
								bottom: 0;
							}
							&.layui-this {
								background: rgba(255, 255, 255, 0.1);
								color: #fff;
								&::after {
									background-color: @primaryColor;
								}
							}
						}
					}
					.layui-icon-shrink-right {
						// display: none;
					}
					.layadmin-tabs-control {
						border: 0;
						color: rgba(255, 255, 255, 0.6);
						&:hover {
							background: rgba(255, 255, 255, 0.2);
						}
						.layui-nav {
							.layui-nav-child {
								background: #0f1e38;
								border: 1px solid #000;
								a {
									color: #fff;
									&:hover {
										background: rgba(0, 0, 0, 0.8);
									}
								}
							}
						}
					}
					.layui-icon-prev,
					.layui-icon-left {
						left: 40px;
					}
					.layui-icon-shrink-right,
					.layui-icon-spread-left {
						left: 0;
					}
					.layui-icon-next,
					.layui-icon-right {
						right: 80px;
					}

					.layui-icon-full {
						right: 0px;

						&::before {
							content: "\e622";
						}
					}

					.layui-icon-down {
						right: 40px;
					}
				}
				& > .layui-body {
					position: relative;
					left: 0;
					display: flex;
					flex: auto;
					top: 0;
					& > .layadmin-tabsbody-item {
						position: relative;
						flex: auto;
					}
				}
			}
		}
	}
}

// @import "./message.less";
.layui-fluid {
	// padding: 0;
	// box-sizing: border-box;
	// .layui-col-space15{
	//     box-sizing: border-box;
	//     margin:-7.5px -7.5px 0 -7.5px ;
	// }
}
.table-full-height {
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	height: 100%;
	& > .layui-card {
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		flex: auto;
		.layui-card-body {
			display: -webkit-flex;
			display: flex !important;
			flex-direction: column;
			flex: auto;

			.table-main-list {
				display: -webkit-flex;
				display: flex !important;
				flex-direction: column;
				flex: auto;

				.layui-table-view {
					display: -webkit-flex;
					display: flex;
					flex-direction: column;
					flex: auto;

					.layui-table-box {
						display: -webkit-flex;
						display: flex;
						flex-direction: column;
						flex: auto;

						.layui-table-body {
							height: 100px;
							flex: auto;
						}
					}
				}
			}
		}
	}
}
.tools-bar {
	position: absolute;
	top: 50%;
	right: 0;
	background: #ccc;
	z-index: 9999;
	cursor: pointer;
	background: @primaryColor;
	border-radius: 6px 0 0 6px;
	padding: 6px;
}
.layui-layer-adminRight {
	top: 0 !important;
}
.card {
    // margin-bottom: 14px;
    border-radius: .6rem;
}
.card-bg-green {
    background: #22af47;
    background: linear-gradient(45deg, #22af47, #d0d962) !important;
    background: -webkit-bg-linear-gradient(45deg, #22af47, #d0d962) !important;
}

.card-bg-blue {
    background: #1ebccd;
    background: linear-gradient(45deg, #1ebccd, #3a55b1) !important;
    background: -webkit-bg-linear-gradient(45deg, #1ebccd, #3a55b1) !important;
}

.card-bg-orange {
    background: #ffbf36;
    background: linear-gradient(45deg, #ffbf36, #ff6028) !important;
    background: -webkit-bg-linear-gradient(45deg, #ffbf36, #ff6028) !important;
}

.card-bg-red {
    background: #f83f37;
    background: linear-gradient(45deg, #f83f37, #ab26aa) !important;
    background: -webkit-bg-linear-gradient(45deg, #f83f37, #ab26aa) !important;
}

.quickBox {
    overflow: hidden;
    padding: 20px 20px;
    cursor: pointer;

    .iconBox {
        float: left;
        height: 50px;
        line-height: 50px;
        margin: 0 15px 0 0;

        i {
            font-size: 32px;
            display: block;
            color: #fff;
        }
    }

    .textBox {
        color: #fff;

        .name {
            font-size: 18px;
            font-weight: bold;
        }

        .eng {
            font-size: 14px;
        }
    }
}
